import { StyleSheet, ScrollView } from 'react-native'
import React, { useEffect, useState } from 'react'
import { Text, View, Divider, Box, Button } from 'native-base'
import axios from '../axios'
import UserCell from '../components/UserCell'
import Banner from '../components/Banner'
import Cell from '../components/Cell'
import { connect } from 'react-redux'
import { addNewFriendAction } from '../redux/actionCreator/chat'

const GoodsDetail = ({ navigation, route, addNewFriendAction }) => {
  console.log(route.params)
  const { id } = route.params
  const [info, setInfo] = useState({})
  useEffect(() => {
    axios.get(`/goods/${id}`).then(res => {
      setInfo(res.data)
    }).catch(err => { })
  }, [])
  const to = (name) => {
    navigation.navigate(name)
  }
  const addCart = () => {
    axios.post('/cart', {
      goodsId: id,
      businessId: info.user._id
    }).then((res) => {
      console.log(res)
    }).catch(err => { })
  }
  const toChat = () => {
    addNewFriendAction({
      friend: info.user
    })
    navigation.navigate('ChatWindow', {
      id: info.user._id,
      name: info.user.nickname
    })
  }
  return (
    <View style={styles.container}>
      <ScrollView>
        <UserCell data={info.user} link={{ name: 'BusinessCenter', params: { userId: info.user?._id } }} />
        <Banner style={styles.banner} list={info.pictures} />
        <Text style={styles.title}>{info.title}</Text>

        <View style={styles.baseInfo}>
          <Cell leftText='价格' rightText={'￥' + info.price} borderBottom={true} />
          <Cell leftText='分类' rightText={info?.category?.name} borderBottom={true} />
          <Cell leftText='下架倒计时' rightText={info.duration} />

        </View>
        <Box style={styles.divider}>
          <Divider w='100' />
          <Text style={{ marginHorizontal: 20 }}>详情</Text>
          <Divider w='100' />
        </Box >
        <View style={styles.details}>
          <Text>{info.description}</Text>
        </View>
      </ScrollView>
      <View style={styles.fixed}>
        <Button style={[styles.btn]} onPress={toChat}>联系客服</Button>
        <Button style={styles.btn} variant="subtle" colorScheme="secondary"
          onPress={addCart}
        >加入购物车</Button>
      </View>
    </View>
  )
}

export default connect(()=>({}),{
  addNewFriendAction
})(GoodsDetail)

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  banner: {
    height: 200
  },
  title: {
    paddingVertical: 10,
    paddingHorizontal: 10,
    fontSize: 18
  },
  baseInfo: {
    marginTop: 20
  },
  divider: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginVertical: 20
  },
  details: {
    backgroundColor: '#fff',
    paddingHorizontal: 10,
    marginBottom: 60
  },
  fixed: {
    position: 'absolute',
    left: 0,
    bottom: 0,
    right: 0,
    display: 'flex',
    flexDirection: 'row'
  },
  btn: {
    width: '50%'
  }
})